<template>
    <div class="atoname userInfo" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <el-row class="addnewsel">
            <el-form 
                :inline="formConf.formInline"
                :label-position="formConf.formlabelPosition"
                :label-width="formConf.formlabelWidth"
                :size="formConf.formSize"
                :status-icons="formConf.formstatusIcon"
                :model="formData"
                :ref="formConf.formRefName">
                <el-row>
                    <el-col
                        v-for="(item,index) in formData.data"
                        v-if="formData.data"
                        :key="index"
                        :span="formConf.formColValue">
                        <el-form-item 
                            :label="item.label" 
                            :rules="item.rules" 
                            :prop="`data[${index}].value`">
                            <div v-if="item.judgeType == 'input'">
                                <el-input v-model.trim="item.value" :readonly="!formConf.readonly ? false : formConf.readonly[index]" :placeholder="item.placeholder" :disabled="item.disabled" :style="{width:formConf.formInputWidth+'%'}"></el-input>
                            </div>
                            <div v-if="item.judgeType == 'inputAndBtn'">
                                <span>
                                    <el-input :type="!formConf.inputAndBtnType ? 'text' : formConf.inputAndBtnType" v-model.trim="item.value" :readonly="!formConf.readonly ? false : formConf.readonly[index]" :placeholder="item.placeholder" :disabled="item.disabled" :style="{width:formConf.formInputAndBtnWidth+'%'}"></el-input>
                                    <el-button 
                                        :type="item.btnData.btnType"
                                        :size="item.btnData.btnSize"
                                        :round="item.btnData.btnRound"
                                        :circle="item.btnData.btnCircle"
                                        :loading="item.btnData.btnLoading"
                                        :disabled="item.btnData.btnDisabled"
                                        @click.native="chooseItem(item.btnData)">
                                        {{item.btnData.btnContent}}
                                    </el-button>
                                </span>
                            </div>
                            <div v-else-if="item.judgeType == 'select'">
                                <el-select v-model.trim="item.value" clearable  collapse-tags :multiple="!formConf.multiple ? false : formConf.multiple[index]" :placeholder="item.placeholder" @change="selChange(item)" :disabled="item.disabled" :style="{width:formConf.formSelectWidth+'%'}">
                                    <el-option v-if="item.option" v-for="sel in item.option" :key="sel.id" :label="sel.value" :value="sel.id"></el-option>
                                </el-select>
                            </div>
                            <div v-else-if="item.judgeType == 'textarea'">
                                <el-input type="textarea" v-model.trim="item.value" :readonly="!formConf.readonly ? false : formConf.readonly[index]" :rows="item.textareaRows" :placeholder="item.placeholder" :disabled="item.disabled" :style="{width:formConf.formTextareaWidth+'%'}"></el-input>
                            </div>
                            <div v-else-if="item.judgeType == 'uploadFile'">
                                <el-upload
                                    class="avatar-uploader"
                                    ref="uploadFile"
                                    :action="formConf.upload.uploadAction"
                                    :multiple="formConf.upload.multiple"
                                    :show-file-list="formConf.upload.showFileList"
                                    :auto-upload="formConf.upload.autoUpload"
                                    :accept="formConf.upload.acceptType"
                                    :file-list="formConf.upload.fileList"
                                    :limit="formConf.upload.fileLimit"
                                    :before-upload="beforeUpload"
                                    :before-remove="beforeRemove"
                                    :on-exceed="handleExceed"
                                    :on-change="handleChange"
                                    @click.native="clearBubble($event)">
                                    <el-button type="primary">{{formConf.uploadBtnContent}}</el-button>
                                    <div slot="tip" class="el-upload__tip">{{formConf.upload.uploadContent}}</div>
                                </el-upload>
                            </div>
                            <div v-else-if="item.judgeType == 'radio'">
                                <el-radio-group v-model="item.value">
                                    <el-radio v-for="radio in item.radioData" @click.native="clearBubble($event)" :label="radio.value" :key="radio.value" :value="radio.value">{{radio.label}}</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="block" v-else-if="item.judgeType == 'date'">
                                <el-date-picker
                                    v-model="item.value"
                                    align="right"
                                    type="date"
                                    :disabled="item.disabled"
                                    :value-format="item.valueFormat"
                                    :placeholder="item.placeholder"
                                    :picker-options="dateBefore"
                                    :style="{width:formConf.formDateWidth+'%'}">
                                </el-date-picker>
                            </div>
                            <div v-else-if="item.judgeType == 'dateRange'">
                                <el-date-picker
                                    v-model="item.value"
                                    type="daterange"
                                    :picker-options="dateBefore"
                                    :disabled="item.disabled"
                                    :value-format="item.valueFormat"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :style="{width:formConf.formDateRangeWidth+'%'}">
                                </el-date-picker>
                            </div>
                            <div v-else-if="item.judgeType == 'rate'">
                                <el-rate
                                    v-model="item.value"
                                    :allow-half="item.allowHalf"
                                    :colors="item.colors"
                                    class="rateClass">
                                </el-rate>
                            </div>
                            <div v-else-if="item.judgeType == 'thumb'">
                                <el-button :type="item.btnType" :size="item.btnSize" v-model="item.value" icon="el-icon-check" circle @click.native="thumbClick(item)"></el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="savebottom">
                    <span v-if="formConf.button_data">
                        <el-form-item>
                            <span
                                v-for="(item,index) in formConf.button_data"
                                :key="index">
                                <el-button
                                    v-if="item.judgeType == 'btn'"
                                    @click.native="eventManage(formData,item)"
                                    :type="item.btnType"
                                    :size="item.btnSize"
                                    :round="item.btnRound"
                                    :circle="item.btnCircle"
                                    :loading="item.btnLoading"
                                    :disabled="item.btnDisabled"
                                    class="btnmargin">
                                    {{item.btnContent}}
                                </el-button>
                            </span>
                        </el-form-item>
                    </span>
                </el-row>
            </el-form>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'formcmpt',
    props:{
        datas:{
            type:Object,
            default(){
                return {
                    cmpt_class:[],
                    cmpt_style:{},
                    attr_data_conf: `[
                        {
                            judgeType:'input',
                            label:'用户名',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'用户名不能为空'
                                }
                            ],
                            placeholder:'请输入用户名',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'姓名',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'姓名不能为空'
                                }
                            ],
                            placeholder:'请输入姓名',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'inputAndBtn',
                            label:'基础指标',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'基础指标不能为空'
                                }
                            ],
                            placeholder:'请选择基础指标',
                            value:'',
                            btnData:{
                                judgeType:"btn",
                                eName:"onChoose",
                                btnType:"primary",
                                btnSize:"",
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:"选择"
                            },
                            disabled: true
                        },
                        {
                            judgeType:'input',
                            label:'年龄',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'年龄不能为空'
                                },
                                {
                                    pattern: /^([1-5][0-9])|6[0-5]$/, 
                                    message: '年纪在10到65岁之间',
                                    trigger:'blur',
                                }
                            ],
                            placeholder:'请输入年龄',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'select',
                            label:'性别',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'性别不能为空'
                                }
                            ],
                            placeholder:'请选择性别',
                            option:[
                                {
                                    id:'fsaf2fwfffafw',
                                    value:'男'
                                },
                                {
                                    id:'nsdjafho34',
                                    value:'女'
                                }
                            ],
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'身份证号',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'身份证号不能为空'
                                }
                            ],
                            placeholder:'请输入身份证号',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'手机号码',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'手机号码不能为空',
                                },
                                {
                                    pattern: /^([1][345789])[0-9]{9}$/, 
                                    message: '请输入正确的手机号码',
                                    trigger:'blur',
                                }
                            ],
                            placeholder:'请输入手机号码',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'座机号码',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'座机号码不能为空'
                                }
                            ],
                            placeholder:'请输入座机号码',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'传真',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'传真不能为空'
                                }
                            ],
                            placeholder:'传真',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'邮箱',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'邮箱不能为空'
                                }
                            ],
                            placeholder:'请输入手机邮箱',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'工作单位',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'工作单位不能为空'
                                }
                            ],
                            placeholder:'请输入工作单位',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'input',
                            label:'职务',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'职务不能为空'
                                }
                            ],
                            placeholder:'请输入职务',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'textarea',
                            label:'逾期原因',
                            rules:[
                                {
                                    required:true,
                                    trigger:'blur',
                                    message:'逾期原因不能为空'
                                }
                            ],
                            textareaRows:3, // 文本域行数
                            placeholder:'请输入逾期原因',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'radio',
                            label:'完成状况',
                            rules:[
                                { 
                                    required: true,
                                    message: '请选择完成状况',
                                    trigger: 'change'
                                }
                            ],
                            radioData:[
                                {
                                    label:'是',
                                    value:true
                                },
                                {
                                    label:'否',
                                    value:false
                                }
                            ],
                            value:true
                        },
                        {
                            judgeType:'date',
                            label:'计划开始日期',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'计划开始日期不能为空'
                                }
                            ],
                            valueFormat:'yyyy-MM-dd',
                            value:'',
                            disabled: false
                        },
                        {
                            judgeType:'dateRange',
                            label:'计划日期',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'计划日期不能为空'
                                }
                            ],
                            valueFormat:'yyyy-MM-dd',
                            value:[],
                            disabled: false
                        },
                        {
                            judgeType:'dateRange',
                            label:'实际日期',
                            placeholder:'实际日期',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'实际日期不能为空'
                                }
                            ],
                            valueFormat:'yyyy-MM-dd',
                            value:[],
                            disabled: false
                        },
                        {
                            judgeType:'rate',
                            label:'评分',
                            value:null,
                            allowHalf:true,
                            colors:['#F7BA2A', '#F7BA2A', '#F7BA2A']
                        },
                        {
                            judgeType:'thumb',
                            label:'点赞',
                            btnType:'info',
                            btnSize:'mini',
                            value:false
                        },
                        {
                            judgeType:'select',
                            label:'职级',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'职级不能为空'
                                }
                            ],
                            placeholder:'请选择职级',
                            option:[
                                {
                                    id:'fsaf2fwf5432rsffafw',
                                    value:'县处级调研员'
                                },
                                {
                                    id:'ns5432sdjafho34',
                                    value:'市处级调研员'
                                },
                                {
                                    id:'nsdj5423gre5afho34',
                                    value:'省处级调研员'
                                }
                            ],
                            value:'',
                            eName: 'rankChange'
                        },
                        {
                            judgeType:'select',
                            label:'学历',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'学历不能为空'
                                }
                            ],
                            placeholder:'请选择学历',
                            option:[],
                            value:'',
                            judgePara: 'rankChange',
                            eName: 'eduChange'
                        },
                        {
                            judgeType:'select',
                            label:'政治面貌',
                            rules:[
                                {
                                    required:true,
                                    trigger:'change',
                                    message:'政治面貌不能为空'
                                }
                            ],
                            placeholder:'请选择政治面貌',
                            option:[
                                {
                                    id:'fsaf2fsdwf543fhkj2rsffafw',
                                    value:'群众'
                                },
                                {
                                    id:'ns5432scxvbgdjafho34',
                                    value:'团员'
                                },
                                {
                                    id:'nsdj5423gre5afh;hlkjo34',
                                    value:'党员'
                                }
                            ],
                            value:'',
                            judgePara: 'eduChange',
                            eName: null
                        },
                        {
                            judgeType:'uploadFile',
                            label:'文件上传',
                        }
                    ]`,
                    form_conf:`{
                        formInline:false, // 行内表单
                        labelPosition: 'right', // 表单对齐方式 top left right
                        formlabelWidth: '100px', // 表单标签宽度配置
                        formSize: 'small', // 表单内组件的尺寸 mdeium small mini
                        formstatusIcon: true, // 在输入框中显示校验结果反馈图标
                        formColValue: 24, // 表单页面配置结构 单列  双列  三列
                        formRefName:'myForm',
                        formInputWidth: '50', // 输入框宽度，百分比,默认空字符串
                        formInputAndBtnWidth: '50', // // 输入框加按钮宽度，百分比,默认空字符串
                        formTextareaWidth: '', // 文本域宽度，百分比,默认空字符串
                        formSelectWidth: '', // 下拉框宽度，百分比,默认空字符串
                        formDateWidth: '', // 日期选择宽度，百分比,默认空字符串
                        formDateRangeWidth: '', // 日期范围选择宽度，百分比,默认空字符串
                        multiple: null, // 是否可以支持多文件上传
                        readonly: null, //输入框是否只读
                        inputAndBtnType: 'textarea', //选择输入框类型
                        button_data:[
                            {
                                judgeType:"btn",
                                eName:"onSubmit",
                                btnType:"primary",
                                btnSize:"",
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:"保存"
                            },
                            {
                                judgeType:"btn",
                                eName:"unSubmit",
                                btnType:"",
                                btnSize:"",
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:"取消"
                            }
                        ],
                        uploadBtnContent:'文件上传',
                        upload: {
                            uploadAction: '', // 文件上传的地址
                            allowUpload: true, // 控制该表单是否支持文件上传功能
                            multiple: true, // 是否可以支持多文件上传
                            showFileList: true, // 上传完是否显示文件列表
                            autoUpload: false, // 是否自动上传
                            acceptType:'.jpg,.vue,.py,.doc,.docx,.txt,.xlsx', // 上传文件格式控制
                            uploadContent: '只支持jpg/vue/py/doc/docx/txt/xlsx格式的文件，且小于2M', // 上传文件大小控制
                            fileLimit: 3,
                            fileList: [], // 已上传文件列表，新增为空，编辑如果有显示列表
                        }
                    }`,
                    intf:{
                        save:{
                            path: '',
                            method: 'post'
                        },
                        rankChange:{
                            path: '',
                            method: 'post'
                        }
                    },
                    intf_eName_conf:[
                        {
                            name:'onSubmit',
                            params:'提交事件'
                        },
                        {
                            name:'unSubmit',
                            params:'不提交'
                        },
                        {
                            name:'submitUpload',
                            params:'立即上传'
                        },
                        {
                            name:'cancelUpload',
                            params:'取消上传'
                        }
                    ],
                    cross_parameter_name: 'mr',
                    event_ele_conf:`{
                        // 级联查询
                        selDataChange:function(item){
                            // 下拉change事件，根据eName判断
                        },  
                        beforeUpload:function(file){
                            const isLt2M = file.size / 1024 / 1024 < 2;
                            if(!isLt2M){
                                this.$notify.error({
                                    title: '警告',
                                    message: '文件过大，不能超过2M！',
                                });
                            }
                            return isLt2M;
                        },
                        beforeRemove:function(file,filelist){
                            return this.$confirm('确定移除' + file.name + '？');
                        },
                        handleChange:function(file,filelist) {
                            if(!this.formConf.upload.autoUpload){
                                const isLt2M = file.size / 1024 / 1024 < 2;
                                if(!isLt2M){
                                    this.formConf.upload.fileList = filelist.filter(item => item.uid !== file.uid);
                                    this.$notify.error({
                                        title: '警告',
                                        message: '文件过大，不能超过2M！',
                                    });
                                    return false;
                                }else{
                                    this.formConf.upload.fileList = filelist;
                                }
                            }else{
                                this.formConf.upload.fileList = filelist;
                            }
                        },
                        handleExceed:function(files, fileList) {
                            this.$message.warning('当前限制选择 3 个文件，本次选择了' + files.length + '个文件，共选择了' + (files.length + fileList.length) + '个文件');
                        },
                        cancelUpload:function(){
                            this.formConf.upload.dialogShow = false;
                            this.formConf.upload.fileList = [];
                        },
                        submitUpload:function(){
                            let formData = new FormData();
                            formData.append('widget', this.formConf.upload.fileList);
                            let config = {
                                headers: {'Content-Type': 'multipart/form-data'},
                                onUploadProgress: progressEvent => {
                                    let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
                                    this.uploadProgress = complete
                                }
                            }
                        },
                        onChoose:function(){
                            this.formData.data.forEach(item => {
                                if(item.key === 'abcdefg'){
                                    item.value = '指标1';
                                }
                            })
                            console.log();
                        },
                        onSubmit:function(data){
                            debugger
                            this.$refs[this.formConf.formRefName].validate(valid => {
                                if(valid){
                                    //通过校验
                                }
                            });
                        },
                        unSubmit:function(data){
                            debugger
                        },
                        clearBubble:function(e){
                            e.stopPropagation();
                        },
                        mounted:function(){
                        }
                    }`
                }
            }
        }
    },
    data () {
        return {
            formData:{
                data: {}
            },
            formConf:{},
            dateBefore: {
                disabledDate: (time) => {
                    return time.getTime() < new Date().getTime() - 3600 * 1000 * 24
                }
            }
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.formData.data = new Function(`return ${this.datas.attr_data_conf}`)()
            }catch(err){
                this.formData.data = JSON.parse(this.datas.attr_data_conf)
            }
        }else{
            this.formData.data = this.datas.attr_data_conf
        }
        if(typeof(this.datas.form_conf) == 'string'){
            try{
                this.formConf = new Function(`return ${this.datas.form_conf}`)()
            }catch(err){
                this.formConf = JSON.parse(this.datas.form_conf)
            }
        }else{
            this.formConf = this.datas.form_conf
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
    },
    methods: {
        eventManage(form,item){
            this[item.eName](form)
        },
        chooseItem(data){
            this[data.eName]()
        },
        uploadManage(item){
            this[item.eName]()
        },
        selChange(item){
            if(item.eName){
                return this.selDataChange(item);
            }
        },
        thumbClick(item){
            item.value = !item.value
            item.btnType = item.value? 'success' : 'info';
        }
    }
}
</script>
<style lang="less" scoped>
.addnewsel{
    display: flex;
    flex-direction: column;
}
.formTitle{
    font-size: 18px;
    height: 40px;
    font-weight: bold;
}
.floatright {
    display: flex;
    justify-content: center;
}
.savebottom{
    display: flex;
    flex-direction: row;
    justify-content: center;
    .btnmargin{
        margin-right:5px;
    }
}
.uploadFiles{
    .uploadBox{
        text-align: center;
        .filesDetail{
            display: inline-block;
            margin:10px 0;
            height: 18px;
            line-height: 18px;
        }
    }
    .avatar-uploader{
        text-align: center;
        .icon-class {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .icon-class:hover {
            border-color: #409EFF;
        }
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>
